<template>
  <div :class="`z-price z-price--${effect}`"
       :style="{color:color}">
    <span :style="{
        fontSize:`${symbolStyle}px`
    }">
      $
    </span>
    <span :style="{
        fontSize:`${size}px`
    }">
      {{currentValue}}
    </span>
  </div>
</template>

<script>
export default {
  name: 'ZPrice',
  props: {
    value: [Number, String],
    precision: {
      type: Number,
      default: 2
    },
    effect: {
      type: String,
      default: 'simple'
    },

    size: {
      type: Number,
      default: 24
    },
    color: {
      type: String,
      default: '#161616'
    }
  },
  computed: {
    currentValue () {
      return Number(this.value || 0).toFixed(this.precision)
    },
    symbolStyle () {
      if (this.effect === 'simple') {
        return this.size < 20 ? 12 : this.size - 8
      }
      return this.size
    }
  }
}
</script>

<style lang="scss" scoped>
.z-price {
  &--simple {
    display: inline-flex;
    font-weight: 700;
    span:nth-of-type(1) {
      padding-right: 1px;
      align-self: flex-end;
    }
  }
  &--primary {
    display: inline-flex;
    font-weight: 700;
    span:nth-of-type(1) {
      padding-right: 1px;
    }
  }
}
</style>
